<template>
  <div class="app-container">
    <div class="form-container">
      <el-form label-width="120" :model="form" ref="refForm" :rules="rules">
        <el-form-item label="调拨商品" prop="fullName">
          <el-select placeholder="">
            <el-option
              v-for="item in goodsList"
              :key="item.goodsCode"
              :label="item.goodsName"
              :value="item.goodsCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调拨出库中转仓" prop="fullName">
          <el-select placeholder="">
            <el-option v-for="item in transitList" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调拨入库中转仓" prop="fullName">
          <el-select placeholder="">
            <el-option v-for="item in transitList" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-container">
      <el-button type="primary" size="default">取消</el-button>
      <el-button type="primary" size="default" @click="handleSubmit(refForm as FormInstance)">添加</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup name="CarTypeForm">
import { Allocate } from "@/api/interface/city/cityAllocate";
import { Transit } from "@/api/interface/city/cityTransit";
import { getAllocateGoodsListAPI } from "@/api/modules/city/cityAllocate/api";
import { addPickerAPI } from "@/api/modules/city/cityPicker/api";
import { getCityTransitListAPI } from "@/api/modules/city/cityTransit/api";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const refForm = ref<FormInstance>();
const rules = ref<FormRules>({
  phonenumber: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur"
    }
  ],
  fullName: [
    {
      required: true,
      message: "请输入配送员姓名",
      trigger: "blur"
    }
  ],
  smsCode: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur"
    }
  ]
});
let form = ref<Allocate.addParams>({
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  city: JSON.parse(localStorage.getItem("userInfo") as string).city
});
const handleSubmit = (formEl: FormInstance) => {
  formEl.validate(valid => {
    if (valid) {
      add();
    } else {
      ElMessage.error("请填写正确的信息");
    }
  });
};
const add = async (): Promise<void> => {
  const { code, msg } = await addPickerAPI(form.value);
  if (code == "200") {
    ElMessage.success("添加成功");
    router.push("/cityLevel/cityOrganization/cityPicker/registNew");
  } else {
    ElMessage.error(msg);
  }
};

// 获取商品列表
const goodsList = ref<Allocate.GoodsRow[]>([]);
const getAllocateGoodsList = async (id = "") => {
  const { code, rows, msg } = await getAllocateGoodsListAPI({ id });
  if (code == "200") {
    if (rows) {
      goodsList.value = rows;
    }
  } else {
    ElMessage.error(msg);
  }
};
// 获取中转仓列表
const transitList = ref<Transit.Row[]>();
const getTransitList = async () => {
  const { rows, code, msg } = await getCityTransitListAPI({
    province: JSON.parse(localStorage.getItem("userInfo") as string).province,
    city: JSON.parse(localStorage.getItem("userInfo") as string).city,
    name: "",
    pageNum: 1,
    pageSize: 100
  });
  if (code == "200" && rows) {
    transitList.value = rows;
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getAllocateGoodsList();
  getTransitList();
});
</script>
<style lang="scss" scoped>
.app-container {
  padding: 10px;
  background-color: white;
  .form-container {
    box-sizing: border-box;
    width: 60%;
    padding: 10px;
    margin: 0 auto;
    .form-title {
      margin-bottom: 15px;
      margin-left: 25px;
      .title-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: white;
        text-align: center;
        vertical-align: middle;
        background-color: #009688;
        border-radius: 50%;
      }
    }
    .sms-code {
      //   float: right;
      position: absolute;
      right: 5px;
      display: inline-block;
    }
  }
  .btn-container {
    margin-top: 20px;
    text-align: center;
  }
}
::v-deep .el-col {
  padding-right: 10px;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
</style>
